<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>点燃SCRM系统中台演示</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/speech.js"></script>
<script>

	function dv(id)
	{
		for(i=1;i<=3;i++)
		{
			if(id==i){
				document.getElementById('dv'+i).style.display="";
				document.getElementById('passid').value=i;
				document.getElementById('menu'+i).style.backgroundColor="#EBEEF5";
				//if(i){yy(i,1);}
			}else{
				document.getElementById('dv'+i).style.display="none";
				document.getElementById('menu'+i).style.backgroundColor="gainsboro";
			}
		}
	}

  	function yy(i,s){
    	var i2=document.getElementById('passid').value;
    	if(i>0){}else{i=i2;}
    	var txt = document.getElementById('yy'+i).innerText;
    	if(s==1){
    		//document.getElementById('counter').value=8;
    		//document.getElementById('passid2').value='yy'+i;
    		ss();
    	}
    	speech(txt);
  	}

</script>

</head>
<body>
<input type="hidden" id="passid" value="0">
<div style="width: 100%;background-color:#1aa094;height: 60px;">
	<span style="float: left;font-size:18px;color: white;background-color: darkslategray;margin-left: 60px;padding: 15px;">聊天</span>
	<span style="float: right;font-size:18px;color: lightcyan;padding: 15px;">广东移动通信有限公司</span>
	<span style="float: right;font-size:18px;color: white;background-color:dodgerblue;margin: 15px;padding: 5px;">后台管理</span>
</div>
<!-- 左侧菜单模块 -->
<div  style="float:left;width:210px;height: 100%; background-color:#F4F4F4;">
	<div style="height: 36px;width: 100%;border-bottom: 1px solid gray;text-align: center;font-weight: bold;padding-top: 10px;">企业微信账号列表:</div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 100%;"><div style="float: left;"><img src="images/tx.png" width="50" height="50"></div><div style="float: left;"><b>所有账号</b><BR>所有账号的聊天列表</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 100%;background-color:#E8E8E8;"><div style="float: left;"><img src="images/tx.png" width="50" height="50"></div><div style="float: left;"><b>中国移动-中中</b><BR>中国移动-中中</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 100%;"><div style="float: left;"><img src="images/tx.png" width="50" height="50"></div><div style="float: left;"><b>中国移动-国国</b><BR>中国移动-国国</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 100%;"><div style="float: left;"><img src="images/tx.png" width="50" height="50"></div><div style="float: left;"><b>中国移动-动动</b><BR>中国移动-动动</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 100%;"><div style="float: left;"></div><div style="float: left;">没有更多了</div></div>
</div>
<!-- 中部菜单模块 -->
<div style="float:left;width:300px;height: 100%; background-color:#E8E8E8;">
	<div style="height: 36px;width: 100%;border-bottom: 1px solid gray;text-align: center;font-weight: bold;padding-top: 10px;">【 中国移动-中中 】的聊天列表</div>
	<div style="padding-top:8px;padding-left:8px;height: 30px;width: 100%;"><input type="text" placeholder="搜索好友,群聊" size="24"></div>
	<div style="padding-top:8px;height: 40px;width: 100%;">
		<div style="padding-top:8px;float: left;text-align: center;width: 34%;border-bottom: 2px solid lightseagreen;color: lightseagreen;">会话（3）</div>
		<div style="padding-top:8px;float: left;text-align: center;width: 33%;">好友（321）</div>
		<div style="padding-top:8px;float: left;text-align: center;width: 33%;">群聊（0）</div>
	</div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 95%;"><div style="float: left;"><img src="images/0.jpg" width="50" height="50"></div><div style="float: left;">我是阿智啊<BR>在吗？</div><div style="float: right;color: darkgray;padding-right: 20px;">1分钟前</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 95%;"><div style="float: left;"><img src="images/1.jpg" width="50" height="50"></div><div style="float: left;">大胖<BR>我来领取二等奖...</div><div style="float: right;color: darkgray;padding-right: 20px;">1分钟前</div></div>
	<div style="padding-top:8px;padding-left:8px;height: 70px;width: 95%;background-color: #DDDDDD;"><div style="float: left;"><img src="images/2.jpg" width="50" height="50"></div><div style="float: left;">小茵茵<BR>[图片]</div><div style="float: right;color: darkgray;padding-right: 20px;">1分钟前</div></div>
</div>
<!-- 对话模块 -->
<div style="float:left;overflow:hidden">
	<div style="height: 36px;width: 100%;border-bottom: 1px solid gray;font-weight: bold;padding-top: 10px;padding-left: 10px;">与小茵茵对话:<span style="font-size: 12px;color: gray;">对话5条</span></div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: left;">
		2021-01-12 15:21:06   小茵茵<BR>
		<img src="images/2.jpg" width="40" height="40">我加入会员了<BR>
	</div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: right;">
		2021-01-12 15:22:06   中国移动-中中<BR>
		好的，看到了<img src="images/tx.png" width="40" height="40"><BR>
	</div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: left;">
		2021-01-12 15:23:06   小茵茵<BR>
		<img src="images/2.jpg" width="40" height="40">有什么好处啊？<BR>
	</div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: right;">
		2021-01-12 15:24:06   中国移动-中中<BR>
		给你一个免费流量包吧<img src="images/tx.png" width="40" height="40"><BR>
	</div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: left;">
		2021-01-12 15:25:06   小茵茵<BR>
		<img src="images/2.jpg" width="40" height="40">好的 谢谢<BR>
	</div>
	<div style="padding-top:8px;padding-left:8px;width: 98%;text-align: left;">
		<textarea cols="80" rows="6">这里是聊天窗口</textarea><BR>
		<button style="background-color: dodgerblue;padding: 10px;">发 送</button>
	</div>
</div>
<!-- 右侧菜单模块 -->
<div style="float:right;height: 100%;width:300px;overflow:hidden;background-color: #EBEEF5;">
		<div onclick="dv(1);" id="menu1" style="height:36px;padding-top:8px;float: left;text-align: center;width: 34%;">客户信息</div>
		<div onclick="dv(2);" id="menu2" style="height:36px;padding-top:8px;float: left;text-align: center;width: 33%;background-color: gainsboro;">话术库</div>
		<div onclick="dv(3);" id="menu3" style="height:36px;padding-top:8px;float: left;text-align: center;width: 33%;background-color: gainsboro;">素材库</div>
		<div id="dv1" style="padding-top:8px;padding-left:8px;width: 100%;">
			<img src="images/2.jpg" width="40" height="40">小茵茵
			<BR>姓名：
			<BR>性别：女
			<BR>客户类型：个人微信
			<BR>手机：-
			<HR>
			<BR>客户标签：
			<BR><span class="ksp">重度游戏</span> <span class="ksp">60元套餐</span>
			<HR>
			<BR>客户企业：
			<BR>职位：-<BR>邮箱：-<BR>规模：-<BR>主营业务：-<BR>公司地址：-<BR>个人简介：-
		</div>
		<div id="dv2" style="padding-top:8px;padding-left:8px;width: 100%;text-align:center;display: none;">
			<span class="asp">提示：双击话术发送，<BR>如是视频或文件请在空白处双击</span>
			<div style="padding-top:8px;padding-left:8px;width: 100%;border: 1px solid gray; width: 90%;">
				<div style="width: 100%;background-color: gray;color: white;">话术分组1</div>
				<li>你好，请问有什么需要帮忙？</li>
				<li>办理宽带业务请按1</li>
				<li>办理移动话费套餐业务请按2</li>
				<li>查询话费请按3</li>
				<li>转人工服务请按4</li>
				<li>没事请挂机</li>
			</div>	
		</div>
		<div id="dv3" style="padding-top:8px;padding-left:8px;width: 100%;display: none;">
			<div style="height: 40px;"><span class="c2sp">小程序&nbsp;&nbsp;</span><span class="c2sp">文件&nbsp;&nbsp;</span><span class="c2sp">视频&nbsp;&nbsp;</span><span class="c2sp">图片&nbsp;&nbsp;</span><span class="c1sp">文字&nbsp;&nbsp;</span></div>
			<div style="clear: both;"></div>
			<div style="width: 95%;padding-top: 50px;"><span style="float: left;">亲亲，下午好，您的{mobile}号码可以享受一个小福利噢，回复“1”来领取噢</span><span style="float: right;background-color: red;color: white;">发送</span></div>
			<div style="clear: both;"></div>
			<div style="width: 95%;padding-top: 10px;""><span style="float: left;">亲亲，福利大派送噢，您只需要花2元就可以一次性购买6个G的流量噢（3天有效期）通用流量！这边帮您申请好么，到期自动失效的噢~</span><span style="float: right;background-color: red;color: white;">发送</span></div>
			<div style="clear: both;"></div>
			<div style="width: 95%;padding-top: 10px;""><span style="float: left;">亲亲，赠送您的5GB流量是通用的噢，到期自动取消，跟您套餐没有任何影响</span><span style="float: right;background-color: red;color: white;">发送</span></div>
			<div style="clear: both;"></div>
			<div style="width: 95%;padding-top: 10px;""><span style="float: left;">亲亲，红包可等值用于兑换美团，肯德基，汉堡王，百果园，美宜佳，沃尔玛，大润发……等无门槛现金抵用劵</span><span style="float: right;background-color: red;color: white;">发送</span></div>
		</div>
</div>
<span id="yy1" style="display: none;">客户信息这里可以查看客户的信息信息</span>
<span id="yy2" style="display: none;">在后台设置的话术库会在这里显示方便调用</span>
<span id="yy3" style="display: none;">在后台设置的素材库会在这里显示方便调用</span>
</body>
</html>